<template>
	<div>
		
		<search></search>
		<el-row class="navbannermes">
		  <el-col :span="18">
			  <el-row class="tac">
			    <el-col :span="5" class="nav-list" ref='getheight'>
			  	  <div id="nav-title">商品分类</div>
			  	  <br>
			  	  <div v-for="(firstlist, index) in lists" :key="index" class="firstlist-name" @mouseenter ="enterFun(index)" @mouseleave ="leaveFun()" >{{firstlist.f.name}}</div>
			    </el-col>
			    <el-col :span="19" v-show="!seen">
			  	  <el-carousel :interval="5000" arrow="always" id="banner">
			  		<el-carousel-item v-for="(address, index) in advertiseList" :key="index">
			  		  <img :src='address.pic' alt="" class="banner-img">
			  		</el-carousel-item>
			  	  </el-carousel>
			    </el-col>
			    <el-col :span="19" v-show="seen">
			    	<div id="selistname" @mouseenter ="enterFun2()" @mouseleave ="leaveFun2()">
			  		<div v-for="(selistname, index) in lists[findex].s" @click="goclassify(selistname.parentId)">{{selistname.name}}</div>
			  	</div>
			    </el-col>
			  </el-row>
		  </el-col>
		  <el-col :span="1"></el-col>
		  <el-col :span="5">
			  <div id="message">
			  	<h2>购物快报</h2>
			  	<div class="news">[特惠]精选图书每满150减50</div>
			  	<div class="news">[特惠]精选图书每满150减50</div>
			  	<div class="news">[特惠]精选图书每满150减50</div>
			  	<div class="news">[特惠]精选图书每满150减50</div>
			  </div>
		  </el-col>
		</el-row>
		<div class="tit">新品上市</div>
		<goodslist :List="newProductList"></goodslist>
		<div class="tit">热门商品</div>
		<goodslist :List="hotProductList"></goodslist>
		
	</div>
</template>

<script>
	import shopheader from '../components/shopheader.vue'
	import search from '../components/search.vue'
	import goodslist from '../components/goodslist.vue'
	export default {
		data () {
		  return {
			lists:[],
			height:0,
			seen:false,
			findex:0,
			show:true,
			newProductList:[],
			hotProductList:[],
			advertiseList:[],
		  }
		},
		methods: {
		  
		  enterFun(index){
			var that = this;
			this.findex = index;
			setTimeout(function (){
				that.seen = true; 
			}, 11);
		  },
		  // },
		  enterFun2(){
			  this.show = false;
		  },
		  leaveFun(){
			  var that = this;   
			  setTimeout(function (){				  
				  if(that.show){
					that.seen = false; 
					}
			  }, 10);	 
		  },
		  leaveFun2(){
			this.show = true;
			this.leaveFun();
		  },
		  goclassify(parentid) {
			  this.$router.push({
          path: '/classifysearch',
          query: {
            parentid: parentid
          }
        })
		  },
		 
		  
		},
		components:{
			'shopheader':shopheader,
			'search':search,
			'goodslist':goodslist
		},
		mounted() {
			var that = this;
			//获取商品分类
			this.axios.get('http://10.11.20.25:8201/mall-portal/product/categoryTreeList')
			  .then(function (response) {
			    //console.log(response.data.data);
				for(var i=0;i<response.data.data.length;i++)
				{
					that.lists.push({'f':response.data.data[i]});
					that.lists[i].s = response.data.data[i].children;
					//console.log(that.lists[i].f.parentId);
				}
			  })
			  .catch(function (error) {
			    console.log(error.response);
			  });
			//获取首页信息  
			this.axios.get('http://10.11.20.25:8201/mall-portal/home/content', {
			  // params: {
			  //   ID: 12345
			  // }
			})
			.then(function (response) {
			console.log(response.data.data.newProductList)
			that.newProductList = response.data.data.newProductList
			that.hotProductList = response.data.data.hotProductList
			that.advertiseList = response.data.data.advertiseList
			//console.log(that.homeFlashPromotion);				
			})
			.catch(function (error) {
			  //console.log(error.response);
			});
			// this.axios.get('http://10.11.20.25:8021/mall-portal/home/content')
			//   .then(function (response) {
			//     console.log(response);
			//   })
			//   .catch(function (error) {
			//     console.log(error);
			//   });
		}
	}
</script>

<style>
	.navbannermes {
		width: 80%;
		margin-left: 10%;
	}
	#message {
		border: solid 1px #DC143C;
		border-radius: 5px;
		box-shadow: 2px 1px #606266;
	}
	#message h2 {
		color: crimson;
		position: relative;
		top: 20px;
		margin-bottom: 40px;
		margin-left: 20px;
	}
	.news {
		padding: 30px;
		margin-left: 20px;
	}
	.el-button-list {
		display: block;
		border: none !important;
		width: 100%;
	}
	.nav-list {
		border: solid 1px #CCCCCC;
		background-color: #99CCFF;
	}
	#nav-title {
		text-align: center;
		color: #606266;
		font-size: 20px;
		margin-top: 10px;
	}
	.firstlist-name {
		text-align: center;
		color: #82848A;
		padding-bottom: 10px;
		padding-top: 10px;
	}
	.firstlist-name:hover {
		background-color: #3A8EE6;
	}
	.banner-img {
		width: 100%;
		height: 100%;
	}
	#banner {
		width: 100%;
		height: 600px;
	}
	#selistname {
		width: 100%;
		height: 600px;
		background-color: #3A8EE6;
	}
	.el-carousel__container {
		height: 600px;
	}
	.tit {
		color: firebrick;
		font-size: 30px;
		margin-left: 10%;
	}
</style>
